@if (isPlain) {
    <div class="value-container" [title]="title" titlePosition="top-start">
        <div #valueElement [class.truncate]="!snapshot.wrapping">{{ value }}</div>
    </div>

    @if (isString && fields) {
        <button class="btn btn-icon" (click)="toggle()" sqxStopClick><i class="icon-wrap_text"></i></button>
    }
} @else {
    <div
        class="html-value"
        #htmlValue
        [innerHTML]="value.html"
        (longHoverCancelled)="hide()"
        longHoverDuration="1500"
        [longHoverSelector]="'img'"
        (sqxLongHover)="show()"></div>

    <div class="preview" position="bottom-start" [sqxAnchoredTo]="htmlValue" *sqxModal="previewModal; closeAuto: false">
        <img [src]="value.preview" />
    </div>
}
<ng-template #html>
    <div
        class="html-value"
        #htmlValue
        [innerHTML]="value.html"
        (longHoverCancelled)="hide()"
        longHoverDuration="1500"
        [longHoverSelector]="'img'"
        (sqxLongHover)="show()"></div>

    <div class="preview" position="bottom-start" [sqxAnchoredTo]="htmlValue" *sqxModal="previewModal; closeAuto: false">
        <img [src]="value.preview" />
    </div>
</ng-template>
